<!doctype html>
<html class="no-js" lang="zxx">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <script src="../static/js/echarts.min.js"></script>
        <title>电商交易数据可视化</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->


        <!-- All css here -->
        <link rel="stylesheet" href="../static/css/bootstrap.min.css">
        <link rel="stylesheet" href="../static/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="../static/css/animate.css">
        <link rel="stylesheet" href="../static/css/slick.css">
        <link rel="stylesheet" href="../static/css/meanmenu.css">
        <link rel="stylesheet" href="../static/css/default.css">
        <link rel="stylesheet" href="../static/css/style.css">
        <link rel="stylesheet" href="../static/css/responsive.css">


        <style>
        .example-div {
            width: 700px;
            height: 700px;
            top: -600px;
            bottom: 0;
            right: -500px;
        }
        </style>

    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->
        <!--  ====== preloader=============================================  -->
        <div id="preloader">
            <div id="loading">
                <div id="loading-center">
                    <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_four"></div>
                    <div class="object" id="object_five"></div>
                    <div class="object" id="object_six"></div>
                    <div class="object" id="object_seven"></div>
                    <div class="object" id="object_eight"></div>

                    </div>
                </div>
            </div>
        </div><!-- /preloader -->

        <!--  ====== header-area-start=======================================  -->
        <header>
            <div id="header-sticky" class="transparent-header header-area">
                <div class="header header5">
                    <div class="container">
                        <div class="row align-items-center justify-content-between">
                            <div class="col-xl-3 col-lg-2 col-md-3 col-sm-3 col-4">
                                <div class="logo d-inline-block">
                                    <a href="/home"><h1 class="text-white wow fadeIn f-700 pb-15 transition-3" style="margin-left: -300px">电商交易数据可视化</h1></a>

                                </div>
                            </div><!-- /col -->
                            <div class="col-xl-8 col-lg-9 col-md-8 col-sm-8 col-8 d-flex justify-content-end" style="margin-right: -400px">
                               <div class="main-menu">
                                   <nav id="mobile-menu">
                                        <ul class="d-block">
                                            <li>
                                                <a class="active text-white" href="/home">首 页</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/rata">男女比例</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/action">消费行为</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/age">年龄数据</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/item">热门商品词云</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/province">各省份消费数据</a>
                                            </li>
                                             <li>
                                                <a class="text-white" href="/recall">回头客预测</a>
                                            </li>
                                        </ul>
                                   </nav>
                               </div><!-- /main-menu -->

                            </div><!-- /col -->
                        </div><!-- /row -->
                    </div><!-- /container -->
                </div>
            </div><!-- /header-bottom -->
        </header>
        <!--  header-area-end  -->


        <!--  ====== header extra info start================================== -->
            <!-- side-mobile-menu start -->
            <div class="side-mobile-menu bg-white pt-50  pb-30 pl-30 pr-30">
                <div class="close-icon float-right pt-10 mb-20">
                    <a href="javascript:void(0);"><span class="icon-clear theme-color"><i class="fa fa-times"></i></span></a>
                </div>
                <div class="mobile-menu"></div>

                <ul class="social-link text-center text-md-right pt-50 pb-50 clear-both">
                    <li class="d-inline-block">
                        <a class="facebook-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="twitter-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-twitter"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="google-plus-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-google-plus-g"></i></a>
                    </li>
                    <li class="d-inline-block">
                        <a class="linkedin-color text-center pl-15 d-inline-block transition-3" href="/"><i class="fab fa-linkedin-in"></i></a>
                    </li>
                </ul><!-- social-link -->
            </div><!-- /side-mobile-menu -->
            <div class="body-overlay"></div>
        <!-- header extra info end  -->
        <main>
            <!-- ====== about-area-start=========================================== -->
            <div id="rata" class="about-area mt-95 over-hidden " style="background-color: white;margin-top: -100px">
                <div class="container">
                    <div class="row align-items-center" style="margin-top: 300px">
                        <div class="col-xl-5 offset-xl-0 col-lg-5 offset-lg-0 col-md-10 offset-md-1 col-sm-12 col-12">
                            <div class="about-img text-center wow fadeInLeft" data-wow-duration="1.6s">
                                <img src="../static/picture/about-img.png" alt="">
                            </div><!-- /about-img -->
                        </div><!-- /col -->
                        <div class="col-xl-8  col-lg-7  col-md-12 col-sm-12 col-12">
                            <div class="about-content mt-350 b-50 pt-10">
                                <div class="title">
                                    <span class="sub-heading d-block f-700 theme-color mb-10">rata</span>
                                    <h3 class="f-700">男女性别比例</h3>
                                </div>

                            </div><!-- /about-content -->
                        </div><!-- /col -->
                        <div class="col-xl-5  col-lg-7  col-md-12 col-sm-12 col-12">
                            <div class="about-content mt-35 b-50 pt-10">
                                <div id="example" class="example-div" >
                                    <script type="text/javascript">
                                            var chartDom = document.getElementById('example');
                                            var myChart = echarts.init(chartDom);
                                            var option;

                                            var data = {{ canshu | tojson }};

                                            // 提取用于图表的数据
                                            var nv = data.find(item => item[0] === 0)[1];
                                            var nan = data.find(item => item[0] === 1)[1];
                                            var weizhi = data.find(item => item[0] === 2)[1];



                                            option = {
                                              tooltip: {
                                                trigger: 'item'
                                              },
                                              legend: {
                                                top: '5%',
                                                left: 'center'
                                              },
                                              series: [
                                                {
                                                  name: '人数',
                                                  type: 'pie',
                                                  radius: ['40%', '70%'],
                                                  avoidLabelOverlap: false,
                                                  itemStyle: {
                                                    borderRadius: 10,
                                                    borderColor: '#04e3f1',
                                                    borderWidth: 2
                                                  },
                                                  label: {
                                                    show: false,
                                                    position: 'center'
                                                  },
                                                  emphasis: {
                                                    label: {
                                                      show: true,
                                                      fontSize: 40,
                                                      fontWeight: 'bold'
                                                    }
                                                  },
                                                  labelLine: {
                                                    show: false
                                                  },
                                                  data: [
                                                    { value: nv, name: '女' },
                                                    { value: nan, name: '男' },


                                                  ]
                                                }
                                              ]
                                            };

                                            option && myChart.setOption(option);

                                    </script>

                                </div>

                            </div><!-- /about-content -->
                        </div><!-- /col -->
                    </div><!-- /row -->
                </div><!-- /container -->
            </div>
            <!-- about-area-end -->
            <img class="f-img-bg w-100 position-absolute top-0 left-0 right-0 w-100 mt-50 mb-100 z-index-1 slider-area slider5-bg overly position-relative slider-height d-flex align-items-center justify-content-center position-relative over-hidden no-repeat bg-cover" src="../static/picture/feature-bg.png" alt="">


        </main>


        <!-- All js here -->
        <script src="../static/js/modernizr-3.5.0.min.js"></script>
        <script src="../static/js/jquery-1.12.4.min.js"></script>
        <script src="../static/js/popper.min.js"></script>
        <script src="../static/js/bootstrap.min.js"></script>
        <script src="../static/js/one-page-nav-min.js"></script>
        <script src="../static/js/slick.min.js"></script>
        <script src="../static/js/wow.min.js"></script>
        <script src="../static/js/plugins.js"></script>
        <script src="../static/js/jquery.meanmenu.min.js"></script>
        <script src="../static/js/main.js"></script>

</body>
</html>